<template>
  <div class="container">
    <div class="search-bar">
      <input
        ref="searchInput"
        class="search-input"
        placeholder="请输入关键词搜索"
        v-model="searchText"
        @change="search"
        type="text"
        :style="{ 'padding-left': isSearch ? 'calc(4.22% + 0.6rem)' : '4.22%' }"
      />

      <button
        @click="
          isSearch = false;
          searchText = null;
        "
        v-if="searchText && isSearch"
        class="cancel"
      ></button>
      <button
        v-else
        @click="search"
        :class="{ 'search-btn': true, isSearch: isSearch }"
      ></button>
    </div>
    <div v-if="!isSearch">
      <!-- <div class="hot-search">
        <div class="title">
          热门搜索
        </div>
        <div v-if="hotSearch.length" class="hot-list">
          <div class="search-cell" v-for="item in ['', '', '', '']">
            香水
          </div>
        </div>
      </div> -->
      <div class="search-history">
        <div
          class="search-cell with-grey-bottom-border"
          v-for="(item, index) in searchHistroy"
          @click="
            searchText = item;
            search();
          "
          :key="index"
        >
          <div class="left">
            <img src="@/assets/搜索-assets/history.png" alt="" />
            {{ item }}
          </div>
          <button @click.stop="historyDelete(index)" class="right"></button>
        </div>
      </div>
    </div>
    <div v-else>
      <!-- <div class="result-nav">
        <div class="nav-btn active">综合</div>
        <div class="nav-btn">销量</div>
        <div class="nav-btn">
          价格
          <img class="up" src="@/assets/搜索结果-assets/s.png" alt="" />
          <img class="down" src="@/assets/搜索结果-assets/x.png" alt="" />
        </div>
      </div> -->
      <item-big-img
        :goodsLists="searchResult"
        imgUrl="img_show"
        vipPrice="original_price"
        price="price"
      ></item-big-img>
    </div>
  </div>
</template>

<script>
import itemBigImg from "@/components/item-big-img.vue";
import { searchGoods } from "@/api/mall";

export default {
  data() {
    return {
      searchText: null,
      isSearch: false,
      hotSearch: [],
      searchHistroy: [],
      searchResult: [],
      page: 1
    };
  },
  watch: {
    isSearch: function(val) {
      if (val === false) this.searchResult = [];
    },
    searchText: function(val) {
      if (!val) this.isSearch = false;
    }
  },
  methods: {
    search() {
      if (this.searchText.trim() !== "") {
        if (this.searchHistroy.indexOf(this.searchText.trim()) === -1) {
          this.searchHistroy.unshift(this.searchText.trim());
          localStorage.setItem(
            "czb_searchHistory",
            JSON.stringify(this.searchHistroy)
          );
        }
        this.$dialog.loading.open("加载中");
        this.isSearch = true;
        searchGoods({
          info: this.searchText,
          page: 1
        }).then(res => {
          this.$dialog.loading.close();
          if (res.status === 200) {
            this.searchResult = res.data.data.commodity;
          }
        });
      }
    },
    historyDelete(index) {
      this.searchHistroy.splice(index, 1);
      localStorage.setItem(
        "czb_searchHistory",
        JSON.stringify(this.searchHistroy)
      );
    }
  },
  mounted() {
    this.$refs.searchInput.focus();
  },
  created() {
    this.searchHistroy =
      JSON.parse(localStorage.getItem("czb_searchHistory")) || [];
  },
  beforeRouteLeave(to, from, next) {
    if (this.isSearch === true && to.path.indexOf("/item-detail") === -1&& to.path.indexOf("/new-dynamics-video") === -1) {
      this.isSearch = false;
      next(false);
    } else {
      next();
    }
  },
  components: {
    itemBigImg
  }
};
</script>

<style lang="less" scoped>
.container {
  height: auto;
  min-height: 100%;

  .search-bar {
    background-color: #fff;
    height: 1.8rem;
    padding: 0.2rem 3.2%;

    .search-input {
      box-sizing: border-box;
      width: 100%;
      height: 1.4rem;
      border: none;
      vertical-align: top;
      font-size: 0.56rem;
      border-radius: 0.16rem;
      background-color: rgb(245, 245, 245);
      font-size: "微软雅黑";
      padding-right: 2rem;
    }

    .search-btn {
      position: absolute;
      width: 1.24rem;
      height: 1.24rem;
      right: 0.6rem;
      top: 0.3rem;
      padding: 0;
      border: 0;
      background: none;
      background-image: url("../../../assets/商城首页-assets/shousuo.png");
      background-repeat: no-repeat;
      background-size: 60% 60%;
      background-position: 50% 50%;
    }

    .cancel {
      position: absolute;
      width: 1.24rem;
      height: 1.24rem;
      right: 0.6rem;
      top: 0.3rem;
      padding: 0;
      border: 0;
      background: none;
      background-image: url("../../../assets/搜索结果-assets/close.png");
      background-repeat: no-repeat;
      background-size: 60% 60%;
      background-position: 50% 50%;
    }

    .isSearch {
      left: 0.6rem;
    }
  }

  .hot-search {
    background-color: #fff;
    padding: 0 3.2%;

    .title {
      font-weight: bold;
      color: rgba(68, 68, 68, 1);
      font-size: 0.58rem;
      height: 2rem;
      line-height: 2rem;
    }

    .hot-list {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .search-cell {
        width: calc(25% - 0.48rem);
        font-weight: bold;
        color: rgba(68, 68, 68, 1);
        font-size: 0.58rem;
        border: 1px solid rgba(233, 233, 233, 1);
        border-radius: 0.6rem;
        height: 1.2rem;
        line-height: 1.2rem;
        text-align: center;
        margin: 0.24rem;
      }
    }
  }

  .search-history {
    padding: 0 3.2%;
    background-color: #fff;

    .search-cell {
      display: flex;
      justify-content: space-between;
      height: 1.76rem;
      line-height: 1.76rem;

      .left {
        font-size: 0.64rem;
        font-weight: bold;
        color: rgba(68, 68, 68, 1);
        max-width: 85%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        img {
          height: 0.76rem;
          width: 0.76rem;
          vertical-align: middle;
          margin-right: 0.6rem;
        }
      }

      .right {
        border: none;
        background: none;
        background-image: url("../../../assets/搜索-assets/delete.png");
        background-size: 0.66rem 0.68rem;
        width: 1rem;
        height: 1.76rem;
        background-position: 50% 50%;
        background-repeat: no-repeat;
      }
    }
  }

  .result-nav {
    background-color: #fff;
    display: flex;
    justify-content: center;
    height: 1.76rem;
    line-height: 1.76rem;
    margin-bottom: 0.48rem;

    .nav-btn {
      font-weight: bold;
      color: rgba(68, 68, 68, 1);
      font-size: 0.58rem;
      width: 25%;
      text-align: center;
      position: relative;

      img {
        position: absolute;
        width: 0.42rem;
        height: 0.24rem;
      }

      .up {
        right: 0.5rem;
        top: 0.6rem;
      }

      .down {
        right: 0.5rem;
        top: 0.95rem;
      }
    }

    .active {
      color: #f85859;
    }
  }
}
</style>
